<template>
  <div class="line-shadow">
    <h1>有阴影效果的line图层:</h1>
    <h2>复制代码去网址（https://jsfiddle.net/o0fy5ams/60/）测试</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      map: null,
      lineCoors: [],
    }
  },
  methods: {
    init(map) {
      console.log("lineShadow======init");
      this.map = map;
      this.getDataAndDraweLayer();
    },
    // 获取线坐标数据并绘制图层
    getDataAndDraweLayer() {
      this.getLineCoor()
        .then((res) => {
          // 获取坐标数据成功
          console.log(res, "获取到的线坐标");
          res.features.forEach((feature, index) => {
            index === 0 && this.lineCoors.push(feature.geometry.coordinates[0]);
          })
          console.log(this.lineCoors, "this.lineCoors")
          // this.addLineSource(this.lineCoors[0]);
          // this.addLineLayer();
          // this.addLineShadowSource(this.lineCoors[0]);
          // this.addLineShadowLayer();
          this.map.addLayer({
            id: 'line-layer',
            type: 'line',
            source: {
              type: 'geojson',
              data: {
                type: 'Feature',
                properties: {},
                geometry: {
                  type: 'LineString',
                  coordinates: [
                    [-67.13734, 45.13745],
                    [-66.96466, 44.8097],
                    [-68.03252, 44.3252],
                    [-69.06, 43.98],
                    [-70.11617, 43.68405],
                    [-70.64573, 43.09008],
                    [-70.75102, 43.08003],
                    [-70.79761, 43.21973],
                    [-70.98176, 43.36789],
                    [-70.94416, 43.46633],
                    [-71.08482, 45.30524],
                    [-70.66002, 45.46022],
                    [-70.30495, 45.91479],
                    [-70.00014, 46.69317],
                    [-69.23708, 47.44777],
                    [-68.90478, 47.18479],
                    [-68.2343, 47.35462],
                    [-67.79035, 47.06624],
                    [-67.79141, 45.70258],
                    [-67.13734, 45.13745]
                  ]
                }
              }
            },
            layout: {
              'line-join': 'round',
              'line-cap': 'round'
            },
            paint: {
              'line-color': '#000',
              'line-width': 4,
            }
          });

          // 添加阴影效果的线图层
        this.map.addLayer({
            id: 'line-shadow-layer',
            type: 'line',
            source: 'line-layer', // 使用相同的数据源
            layout: {
              'line-join': 'round',
              'line-cap': 'round'
            },
            paint: {
              'line-color': '#000', // 阴影的颜色
              'line-width': 20,
              'line-opacity': 0.5,
              'line-blur': 10,
              'line-translate': [5,0]
            }
          });
        })
    },
    // 获取线坐标数据
    getLineCoor() {
      return new Promise((resolve, reject) => {
        const url = "https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson";
        fetch(url)
          .then(response => response.json())
          .then(data => {
            resolve(data);
          })
          .catch(error => {
            console.error("获取plygon的数据失败 ===>>>::", error);
            return console.log("error")
          });
      })
    },
    addLineSource(coor) {
      console.log("addLineSource");
      this.map.addSource("lineSourceId", {
        type: "geojson",
        data: {
          type: "Feature",
          properties: {},
          geometry: {
            type: "LineString",
            coordinates: coor,
          }
        }
      })
    },
    // 添加有阴影的线数据源
    addLineShadowSource(coor) {
      console.log("addLineShadowSource");
      this.map.addSource("lineShadowSourceId", {
        type: "geojson",
        data: {
          type: "Feature",
          properties: {},
          geometry: {
            type: "LineString",
            coordinates: coor,
          }
        }
      })
    },
    addLineLayer() {
      console.log("addLineLayer");
      this.map.addLayer({
        id: "lineLayerId",
        type: "line",
        source: "lineSourceId",
        layout: {
          "line-join": "round",
          "line-cap": "round",
        },
        paint: {
          "line-color": "#72eefc",
          "line-width": 5
        }
      })
    },
    // 添加有阴影的线图层
    addLineShadowLayer() {
      console.log("addLineShadowLayer");
      this.map.addLayer({
        id: "lineShadowLayerId",
        type: "line",
        source: "lineShadowSourceId",
        layout: {
          "line-join": "round",
          "line-cap": "round",
        },
        paint: {
          "line-color": "rgba(255, 255, 255, 0.5)",
          "line-width": 20
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.line-shadow {
  position: absolute;
  top: 50px;
  left: 10px;
  color: #fff;
}
</style>
